<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>selections</title>
    <script src="./js/d3-selection.min.js"></script>
</head>

<body>
    <p>this is p</p>
    <ul>
        <li>1</li>
        <li>1</li>
        <li class="end">1</li>
    </ul>
    <svg>
        <rect></rect>
    </svg>
</body>
<script>
    /**
     * select       取第一个
     * selectAll    取所有
     * filter       过滤
     * merge        合并
     * matcher      匹配
     * creator      分配指定的元素名称它返回一个函数
     * each         遍历
     * local        独立于数据的本地状态
     * set          指定节点上此local的值设置为该值
     * remove       指定节点中删除此本地值
    */

    var body = d3.select("body");
    d3.select("p").style("color", "red");

    d3.selectAll("li").style("color", "red");

    d3.selectAll("li").filter(".end").style("color", "blue");

    var data = [10, 5, 12, 15];
    var rect = d3.selectAll("rect").data(data);
    rect.enter().append("rect").merge(rect);

    console.log(d3.matcher("li"))

    console.log(d3.local())
</script>

</html>